<template>
  <view class="air1">
    <view class="yptext">
      <view class="air-item">{{ item.title }}</view>
      <view class="yprh">
        <text class="value">{{ item.value }}</text>
        <text class="rh">{{ item.unit }}</text>
      </view>
      <view class="ypclock">{{ formatTime(item.createTime) }}</view>
      <view class="ypclock">{{ formatTime(item.pustTime) }}</view>
    </view>
    <view class="ypimg"></view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义子组件的属性
const props = defineProps({
  item: {
    type: Object,
    required: true
  }
});

// 格式化时间
const formatTime = (timeString) => {
  if (!timeString) return '--:--'; // 如果时间字符串为空，返回默认值
  
  const date = new Date(timeString);
  if (isNaN(date.getTime())) return '--:--'; // 如果日期无效，返回默认值
  
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};
</script>

<style scoped lang="scss">
.air1 {
  width: 329rpx;
  height: 200rpx;
  border-radius: 20rpx;
  background-color: #e7f6f0;
  margin-left: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  .yptext {
    width: 190rpx;
    height: 178rpx;
    .air-item {
      padding-left: 25rpx;
      padding-top: 29rpx;
    }
  }
  .ypimg {
    width: 98rpx;
    height: 98rpx;
    background-color: #79e0b2;
    border-radius: 50%;
    margin-left: 20rpx;
    margin-top: 38rpx;
  }
}

.yprh {
  font-size: 45rpx;
  font-weight: 600;
  margin-left: 30rpx;
  .value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 18rpx;
  }
  .rh {
    color: #9e9f9e;
    font-size: 22rpx;
    font-weight: normal;
  }
}

.ypclock {
  margin-left: 30rpx;
  font-size: 18rpx;
  color: #9e9f9e;
  margin-top: 10rpx;
}
</style>